<script setup lang="ts">
import { Container, TabsContainer } from '@/models/containers';
import { zipWith } from "lodash-es";
import { inject, ref } from 'vue';
import * as injectKeys from "@/services/injectKeys";

const props = defineProps<{ model: TabsContainer }>()
const model = props.model

const dynamicComponent = inject(injectKeys.dynamicComponentKey)!



const infos = zipWith(model.names, model.children, model.iconIds, (name, children, iconId) => {
    return {
        name, box: children, iconId
    }
})

const tab = ref(model.names[0])

</script>

<template>
    <div class="pybi-tabs">

        <el-tabs class="el-cp-tabs" v-model="tab" v-bind="model.tabsProps">
            <el-tab-pane v-bind="model.panelsProps" v-for="info in infos" :name="info.name" :label="info.name">
                <template #label>
                    <div class="custom-tabs-label">
                        <component :is="dynamicComponent"
                            :component="{ tag: 'Icon', iconID: info.iconId, size: '1em', color: 'currentColor' }">
                        </component>
                        <span class="tab-name">{{ info.name }}</span>
                    </div>
                </template>

                <component :is="dynamicComponent" :component="info.box"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped lang="less">
.pybi-tabs {
    width: 100%;

    .el-cp-tabs {
        width: 100%;
    }

    .custom-tabs-label {
        font-size: 1.5em;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .tab-name {
            margin-left: 0.5em;
        }
    }

}
</style>